
<template >
  <div>
      <el-row>
        <el-col :span="4"  v-for="(item,index) in hotlist" :key="index" >
          <el-card :body-style="{ padding: '8px' }">
              <el-image :src="item.imgURL" lazy></el-image>
              <div style="padding: 14px;">
              <span>{{item.name}}</span>
              <div class="bottom clearfix">
              <span>ID:  {{item.id}}</span>
              </div>
                <!-- <time class="time">{{item.createTime}}</time> -->
                <span>NO.{{item.count}}</span>
                <!-- <el-button type="text" class="button">操作按钮</el-button> -->
            </div>
          </el-card>
        </el-col>
      </el-row>
  </div>
</template>

    
<script>
import {getChatRoomRank} from '../../util/api.js'
  export default {

    data () {
      return {
        hotlist:[]
      }
    },
    created(){
       this.token= window.sessionStorage.getItem('token')
      this.init()
    },
    methods: {
       async init () {
        //得到热榜
        const result =await this.$http.post(getChatRoomRank,
          {
            'token':this.token
          });
            console.log(result)
            if(result.status!==200) return this.$message.console.error("获取数据失败！");
             this.$message.success("获取数据成功") 
            var hotlist=[]
            console.log(result.data.length)
            if(result.data.length>10)
            {
            for (let index = 0; index <10; index++) {
                hotlist[index]=result.data.list[index]
                hotlist[index].count=index+1
            }
            }
            else{
                for (let index = 0; index <result.data.length; index++) {
                hotlist[index]=result.data.list[index]
                hotlist[index].count=index+1
            }
            }
             this.hotlist=hotlist
       }
          },
  }
  
</script>

<style lang="less" scoped>
.time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>